<template>
 <mt-tabbar v-model='message' fixed>
    <mt-tab-item id='tab1'>
      <img slot='icon' :src='this.atabs[0]'>
      乐销商城
    </mt-tab-item>
    <!-- <mt-tab-item id='tab2'>
      <img slot='icon' v-bind:src='this.atabs[1]'>
      立即赚钱
    </mt-tab-item> -->
    <mt-tab-item id='tab3'>
      <img slot='icon' v-bind:src='this.atabs[2]'>
      发现
    </mt-tab-item>
    <mt-tab-item id='tab4'>
      <img slot='icon' v-bind:src='this.atabs[3]'>
      游乐场
    </mt-tab-item>
    <mt-tab-item id='tab5'>
      <img slot='icon' v-bind:src='this.atabs[4]'>
      我的
    </mt-tab-item>
  </mt-tabbar>
</template>
<script>
export default {
  name:'tabbar',
  data () {
    return {
      message: this.selected,
      atabs: this.tabs,
    }
  },
  props: {
    selected: String,
    tabs: Array
  },
  watch: {
    message: function (val) {
      // console.log()
      // document.getElementsByClassName('mint-tabbar').addEventListener('click',(e)=>{
      //   console.log(e)
      // })
      switch (val) {
        case 'tab1':
          this.$router.replace('/mall')
          break
        case 'tab2':
          this.$router.replace('/makeMoney')
          break
        case 'tab3':
          this.$router.replace('/found/0')
          break
        case 'tab4':
          this.$router.replace('/gamePark')
          break
        case 'tab5':
          this.$router.replace('/my')
          break
      }
    }
  }
}
</script>

<style scoped>
.mint-tab-item-label{
  font-size: .7rem !important;
}
.mint-tabbar > .mint-tab-item.is-selected{
  background: none;
  color: #E22319;
}
</style>
